<template>
	<view class="contract-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" color="#333" size="42"></u-icon>
			</view>
			<view class="nav-title">合同详情</view>
			<view class="nav-right">
				<view class="nav-action" @click="refreshPage">
					<u-icon name="reload" color="#333" size="36"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- web-view容器 -->
		<web-view 
			:src="contractUrl" 
			class="web-view"
			@message="handleMessage"
			@error="handleError"
			@load="handleLoad"
		></web-view>
		
		<!-- 加载提示 -->
		<view v-if="loading" class="loading-container">
			<view class="loading-text">正在加载合同...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contractUrl: '',
				orderNo: '',
				loading: true
			}
		},
		onLoad(params) {
			this.orderNo = params.order_no || '';
			this.contractUrl = `https://www.shuyunpt.com/api/index/contract?order_no=${this.orderNo}`;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			handleMessage(event) {
				console.log('web-view message:', event);
			},
			handleError(event) {
				console.error('web-view error:', event);
				this.loading = false;
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				});
			},
			handleLoad(event) {
				console.log('web-view loaded:', event);
				this.loading = false;
			},
			refreshPage() {
				this.loading = true;
				// 重新构建URL来刷新页面
				this.contractUrl = `https://www.shuyunpt.com/api/index/contract?order_no=${this.orderNo}&t=${Date.now()}`;
			}
		}
	}
</script>

<style scoped>
	.contract-container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
		z-index: 100;
	}
	
	.nav-left {
		width: 80rpx;
		display: flex;
		align-items: center;
	}
	
	.nav-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}
	
	.nav-right {
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.nav-action {
		padding: 10rpx;
	}
	
	.web-view {
		flex: 1;
		width: 100%;
	}
	
	.loading-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
	}
	
	.loading-text {
		font-size: 28rpx;
		color: #666;
		text-align: center;
	}
</style> 